<template>
  <h4 style="color: black">新增病虫害发生记录</h4>
  <hr class="newhr" />
  <!-- NewFrom 抽屉里表单 -->
  <el-form
    :model="RuleFormData"
    ref="form"
    :rules="rules"
    label-width="120px"
    size="default"
    :props="{
      label: (data) => {
        console.log('data', data)
      }
    }"
  >
    <div class="flex">
      <el-form-item label="发生时间">
        <el-col :span="24">
          <el-date-picker
            v-model="RuleFormData.time"
            type="date"
            placeholder="请选择日期"
            style="width: 100%"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-col>
      </el-form-item>
    </div>
    <div class="flex">
      <el-form-item label="受害动/植物">
        <el-input v-model="RuleFormData.Flora" />
      </el-form-item>
      <el-form-item label="发生规模(亩次)">
        <el-input v-model.number="RuleFormData.area" />
      </el-form-item>
    </div>
    <el-form-item label="处理办法">
      <el-input v-model="RuleFormData.method" />
    </el-form-item>
    <el-form-item label="情况说明">
      <el-input v-model="RuleFormData.Instructions" type="textarea" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="RuleFormData.remark" type="textarea" />
    </el-form-item>
    <hr />
    <el-form-item el-form-item>
      <el-button type="success" @click="onsubmit" v-if="edata">修改</el-button>
      <el-button type="primary" @click="onsubmit" v-else>确定</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { FormRules } from 'element-plus'
import { onMounted } from 'vue'
import { BugRecordPost, BugRecordPut } from '@/api/Plant/index'
import { RuleFormType } from './types/BugRecord'

type CateType = Omit<RuleFormType, 'children'>
const rules = reactive<FormRules<CateType>>({
  time: [{ required: true, message: '请选择发生时间', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  method: [{ required: true, message: '请输入处理方法', trigger: 'blur' }],
  area: [{ required: true, message: '请输入发生规模(亩次)', trigger: 'blur' }],
  Flora: [{ required: true, message: '请输入受侵害动/植物', trigger: 'blur' }],
  Instructions: [{ required: true, message: '请输入情况说明', trigger: 'blur' }]
})

const emit = defineEmits()

const RuleFormData: RuleFormType = reactive({
  time: '', //发生时间
  remark: '', //备注
  method: '', //处理方法
  area: '', //发生规模(亩次)
  Flora: '', //受侵害动/植物
  Instructions: '' //情况说明
})

const onsubmit = () => {
  // BugRecordPost(RuleFormData).then((res) => {
  //   emit('update:table-data', {
  //     ...RuleFormData,
  //     objectId: res.data.objectId
  //   })
  //   console.log(res);
  // })
  /////
  if (props.edata) {
    // 修改
    let { objectId } = props.edata
    BugRecordPut(objectId, RuleFormData).then(() => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId
      })
    })
  } else {
    //新增
    BugRecordPost(RuleFormData).then((res) => {
      emit('update:table-data', {
        ...RuleFormData,
        objectId: res.data.objectId
      })
    })
  }
}

// 区分新增、编辑
// props数据具备单向性
type PropsType = {
  edata: RuleFormType | null
}
const props = defineProps<PropsType>()
console.log('接收到了父级的props', props.edata)
onMounted(() => {
  if (props.edata) {
    //点击到了编辑按钮
    let { time, remark, method, area, Flora, Instructions } = props.edata
    RuleFormData.time = time
    RuleFormData.remark = remark
    RuleFormData.method = method
    RuleFormData.area = area
    RuleFormData.Flora = Flora
    RuleFormData.Instructions = Instructions
  } else {
    //点击到了新增按钮
    RuleFormData.time = ''
    RuleFormData.remark = ''
    RuleFormData.method = ''
    RuleFormData.area = ''
    RuleFormData.Flora = ''
    RuleFormData.Instructions = ''
  }
})
</script>
<style>
.seekone {
  background-color: #2b59dd;
  color: white;
}

.backgauge {
  padding: 20px 30px;
}

.newhr {
  margin-bottom: 30px;
}
</style>
